<template>
  <div class="hello">
    <App></App>
    <x-header>关于我们</x-header>
    <tab :line-width=2 active-color='#fc378c' v-model="index">
      <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
    </tab>
    <swiper v-model="index" height="100px" :show-dots="false">
      <swiper-item v-for="(item, index) in contentList" :key="index">
        <div class="tab-swiper vux-center"><div style="padding: 50px 20px;text-align: center">{{item}}</div></div>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import App from '../../App'
import { XHeader, TransferDom, Tab, TabItem, Swiper, SwiperItem, Cell, CellBox, CellFormPreview, Group, Badge, XButton, Box, XTextarea, ConfirmPlugin } from 'vux'
import Vue from 'vue'
Vue.use(ConfirmPlugin)

const list = () => ['关于我', '联系我']
const contentList = () => ['我是高元，你好', '直接去我位置上找我']

export default {
  name: 'AccountAbout',
  directives: {
    TransferDom
  },
  components: {
    App,
    XHeader,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge,
    XButton,
    Box,
    XTextarea
  },
  data () {
    return {
      value: '',
      valueIconType: '',
      valuePlaceholder: '输入反馈意见',
      list2: list(),
      contentList: contentList(),
      demo2: '美食',
      index: 0
    }
  },
  methods: {
    insertBack () {
      var value = this.value
      if (Object.is(value, '')) {
        this.valueIconType = 'error'
        this.valuePlaceholder = '反馈意见不能为空'
        return
      }
      this.$vux.confirm.show({
        title: '提示',
        content: '确认提交反馈吗？',
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        },
        onCancel () {
          console.log('plugin cancel')
        },
        onConfirm () {
          console.log('plugin confirm')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/center.less';

  .box {
    padding: 15px;
  }
  .active-6-1 {
    color: rgb(252, 55, 140) !important;
    border-color: rgb(252, 55, 140) !important;
  }
  .active-6-2 {
    color: #04be02 !important;
    border-color: #04be02 !important;
  }
  .active-6-3 {
    color: rgb(55, 174, 252) !important;
    border-color: rgb(55, 174, 252) !important;
  }
  .tab-swiper {
    background-color: #fff;
    height: 100px;
  }
</style>

